<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Agora Web RTS Quickstart</title>
</head>

<body class="agora-theme">
  <script type="text/javascript" src="AgoraRTC.js"></script>
  <script type="text/javascript" src="AgoraRTS.js"></script>
  <div class="navbar-fixed">
    <nav class="agora-navbar">
      <div class="nav-wrapper agora-primary-bg valign-wrapper">
        <h5 class="left-align">Agora Web RTS Quickstart</h5>
        <a href="https://github.com/AgoraIO/Basic-Video-Call/tree/master/One-to-One-Video/Agora-Web-RTS-Tutorial-1to1-Webpack"
          class="agora-github-pin"></a>
      </div>
    </nav>
  </div>
  <form id="form" class="row container ">
    <div class="col m4 xl4 s12">
      <div class="card">
        <div class="row card-content" style="margin-bottom: 0px;">
          <div class="input-field">
            <input type="text" name="appID" class="active">
            <label for="appID" class="active">App ID</label>
          </div>
          <div class="input-field">
            <input type="text" name="channel">
            <label for="channel" class="active">Channel</label>
          </div>
          <div class="input-field">
            <input type="text" name="token">
            <label for="token" class="active">Token</label>
          </div>
          <div class="row">
            <div class="row col m12 s12">
              <button class="btn btn-raised btn-primary waves-effect waves-light" id="join">Join</button>
              <button class="btn btn-raised btn-primary waves-effect waves-light" id="leave">Leave</button>
              <button class="btn btn-raised btn-primary waves-effect waves-light" id="share">Share to Mobile</button>
            </div>
          </div>
          <div class="row hide" id="share_qrcode" style="display: flex; justify-content: center;">
            <canvas id="qrcode" style="min-height: 255px; min-width: 150px;" ></canvas>
          </div>
          <div class="row col" style="margin: 0">
            <div class="switch">
              <h6 style="color: rgba(0,0,0,.26);">Show Profile</h6>
              <label>
                <input id="show_profile" type="checkbox">
                <span class="lever"></span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="grey darken-3">
        <ul class="collapsible grey darken-3">
          <li>
            <div class="collapsible-header grey darken-3 white-text text-darken-2 center">
              <span class="container">Advanced Settings</span>
            </div>
            <div class="collapsible-body">
              <div class="row">
                <div class="col s12">
                  <div class="input-field">
                    <input type="number" name="uid" />
                    <label for="UID" class="active">UID</label>
                  </div>
                  <div class="input-field">
                    <select name="cameraId" id="cameraId"></select>
                    <label>CAMERA</label>
                  </div>
                  <div class="input-field">
                    <select name="microphoneId" id="microphoneId"></select>
                    <label>MICROPHONE</label>
                  </div>
                  <div class="input-field">
                    <select name="cameraResolution" id="cameraResolution"></select>
                    <label>CAMERA RESOLUTION</label>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="mode" class="active">MODE</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="mode" value="live" checked />
                        <span>live</span>
                      </label>
                      <label>
                        <input type="radio" class="with-gap" name="mode" value="rtc" />
                        <span>rtc</span>
                      </label>
                    </div>
                  </div>
                  <div class="row col s12">
                    <div class="row">
                      <label for="codec" class="active">CODEC</label>
                    </div>
                    <div class="row">
                      <label>
                        <input type="radio" class="with-gap" name="codec" value="h264" checked />
                        <span>h264</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="col m8 xl8 s12">
      <div class="video-flex-container" id="video">
        <div class="video-view hide" id="local_rect">
          <div id="local_stream" class="video-placeholder"></div>
          <div id="local_video_info" class="video-profile hide"></div>
          <div id="video_autoplay_local" class="autoplay-fallback hide"></div>
        </div>        
      </div>
    </div>
  </form>
</body>

</html>